<template>
  <div>
    <conditions-query
      @queryInitTable="initTable"
      ></conditions-query>
    <!-- 表格 -->
    <div class="tableBox">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        @click="editClick({}, 'add')"
        >新增</el-button>
      <el-table :data="tomatos" stripe height="calc(100vh - 330px)">
        <el-table-column type="index" label="序号" width="50" align="center"/>
        <!-- <el-table-column prop="id" label="id" width="40" /> -->
        <el-table-column prop="code" label="编码" width="140" />
        <el-table-column prop="name" label="名称" width="200"/>
        <el-table-column prop="weight" label="重量(斤)" />
        <el-table-column prop="weightPhoto" label="重量拍照" width="140" />
        <el-table-column prop="loadPerson" label="装车人" />
        <el-table-column prop="loadPhone" label="装车人电话" width="160" />
        <el-table-column prop="roomNo" label="大棚" width="160" />
        <el-table-column prop="photoTime" label="拍照时间" width="180"
          show-overflow-tooltip >
          <template slot-scope="scope">{{
            scope.row.photoTime | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="pickTime" label="采摘时间" width="180"
          show-overflow-tooltip >
          <template slot-scope="scope">{{
            scope.row.pickTime | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="loadTime" label="装车时间" width="180"
          show-overflow-tooltip >
          <template slot-scope="scope">{{
            scope.row.loadTime | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="departTime" label="发车时间" width="180"
          show-overflow-tooltip >
          <template slot-scope="scope">{{
            scope.row.departTime | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="180"
          show-overflow-tooltip >
          <template slot-scope="scope">{{
            scope.row.createTime | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="160" />
        <el-table-column fixed="right" label="操作" width="160">
          <template
            slot-scope="scope">
            <el-tag
            @click="editClick(scope.row, 'edit')" size="small"
              >编辑</el-tag>
            <el-tag
              @click="editClick(scope.row, 'delete')"
              type="danger"
              size="small"
              >删除</el-tag>
            <el-tag
              @click="editClick(scope.row, 'detail')"
              size="small"
              >查看</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 10px 0px 15px 0px; text-align: center"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 15, 20, 50]"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total">
      </el-pagination>
    </div>
    
    <main-add
      v-if="addShow"
      @close="closeAdd"
      :isShow="addShow"
    ></main-add>

    <main-edit
      v-if="editShow"
      :isShow="editShow"
      @close="closeEdit"
      :editEditData="editEditData"
    ></main-edit>

    <main-detail
      v-if="detailShow"
      :isShow="detailShow"
      @close="closeDetail"
      :detailData="detailData"
    ></main-detail>

  </div>
</template>
<script>
import ConditionsQuery from "@/pages/ConditionsQuery.vue";
import MainAdd from "@/pages/MainAdd.vue";
import MainEdit from "@/pages/MainEdit.vue";
import MainDetail from '@/pages/MainDetail.vue';
export default {
  name: "main-list",
  components: {
    ConditionsQuery,
    MainAdd,
    MainEdit,
    MainDetail
  },
  data() {
    return {
      tomatos: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      detailRow: {},
      eventType: "",
      editEditData: {},
      detailData: {},
      addShow: false,
      editShow: false,
      detailShow: false,
    };
  },
  created() {
    this.initTable();
  },
  methods: {    
    // 初始化表格数据
    initTable(formQuery, type) {
      let self = this;
      self.formQuery = formQuery;
      const loading = this.$loading({
        lock: true,
        text: "拼命加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let url = "/watch-server/watch-tomato/tomato/queryTomatoList";
      let params = {
        code: "",
        name: "",
        pageNum: self.pageNum,
        pageSize: self.pageSize
      };

      // 传的参数不一样
      if (type == "reset") {
        self.pageNum = 1;
        self.pageSize = 10;
        params.pageNum = 1;
        params.pageSize = 10;
      } else if (type == "query") {
        if (formQuery instanceof Object) {
          params.code = formQuery.code;
          params.name = formQuery.name;
          self.pageNum = 1;
          self.pageSize = 10;
          params.pageNum = 1;
          params.pageSize = 10;
        } else {
          // console.log('不是Object');
        }
      }

      self
        .postAxios(url, params)
        .then(res => {
          loading.close();
          if (res.code == 200) {
            self.tomatos = res.data.list;
            self.total = res.data.total;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(error => {
          console.log('error:', error);
          loading.close();
        });
    },
    // 点击新增/编辑/删除
    editClick(row, type) {
      // console.log('---row', row, '---type',type);
      let self = this;
      self.detailRow = row;
      self.eventType = type;

      if (type == "add") {
        self.addShow = true;
      } else if (type == "delete") {
        self
          .$confirm("此操作将删除该条数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass: "delete-message-box"
          })
          .then(() => {
            self.deleteData(row);
          })
          .catch(() => {
            self.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (type == "edit") {
        self.editEditData = {};
        self.editEditData = row;
        // self.eventType = type;
        self.editShow = true;
      } else if (type == "detail") {
        self.detailData = {};
        self.detailData = row;
        self.detailShow = true;
      }
    },
    deleteData(row) {
      let self = this;
      let url = "/watch-server/watch-tomato/tomato/deleteTomato";
      let params = {
        id: row.id
      };
      self.postAxios(url, params).then(res => {
        if (res.code == 200) {
          self.$message({ type: "success", message: "删除成功!" });
          self.initTable(self.formQuery, "self");
        } else {
          self.$message.error(res.message);
        }
      });
    },
    // 关闭编辑弹窗
    closeEdit(data) {
      let self = this;
      self.editShow = false;

      if (data != null) {
        self.pageNum = 1;
        self.initTable(self.formQuery, "self");
      } else {
        // self.initTable({}, "self");
      }
    },
    // 关闭新增弹窗
    closeAdd() {
      let self = this;
      self.addShow = false;
      self.initTable(self.formQuery, "self");
    },
    // 关闭查看弹窗
    closeDetail() {
      let self = this;
      self.detailShow = false;
    },
    // 每页数量发生改变
    onSizeChange(val) {
      let self = this;
      self.pageSize = val;
      self.initTable(self.formQuery, "self");
    },
    // 页码发生改变
    onCurrentChange(val) {
      let self = this;
      self.pageNum = val;
      self.initTable(self.formQuery, "self");
    },

  }
};
</script>


<style scoped>
/** 表格样式 */
.tableBox {
  /* margin-top: 10px; */
  background: #fff;
  padding: 10px 20px 0px;
  height: calc(100vh - 248px);
}
.tableBox .el-button {
  float: left;
}
.tableBox .upload-btn {
  color: #fff;
  background: #1ab394;
  border-color: #1ab394;
}
.tableBox .download-btn {
  color: #fff;
  background: #e6a23c;
  border-color: #e6a23c;
}
.tableBox .el-tag {
  cursor: pointer;
}
.tableBox .locate-btn {
  color: #67c23a;
}
.tableBox .edit-btn {
  color: #409eff;
}
.tableBox .del-btn {
  color: #f56c6c;
}

</style>